<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>h5</title>
        <script type='text/javascript' src='http://localhost:9000/public/js/lib/d3.min.js' chartset='utf-8'></script>
	</head>
	<body>
		<style>
        	.chart rect{
				fill:rgb(0,0,255);
			}
			.chart text{
				fill:rgb(255,255,255);
				font:10px sans-serif;
				text-anchor:end;
			}
        </style>
        <svg class='chart'>
        	
        </svg>
        <script type='text/javascript'>
			
			var data = [ 4,8,15,16,23,42 ] ;
			
			var width = 420 ;
			var barHeight = 20 ;
			
			var x = d3.scale.linear()
					.domain([0,d3.max(data)])
					.range([0,width]) ;
			
			var chart = d3.select('.chart')
						.attr('width',width)
						.attr('height',barHeight*data.length) ;
        	
			var bar = chart.selectAll('g')
						.data(data).enter().append('g')
							.attr('transform',function(d,i){
								return "translate(0," + (i*(barHeight+1)) + ")";
							}) ;
			
			bar.append('rect')
				.attr('width',0)
				.transition()
				.duration(2000)
				.attr('width',function(d){return x(d);})
				.attr('height',barHeight) ;
				
			bar.append('text')
				.attr('x',0)
				.transition()
				.duration(2000)
				.attr('x',function(d){return x(d)-2;})
				.attr('y',barHeight/2)
				.attr('dy','.35em')
				.text(function(d){
					return d ;
				}) ;
			
        </script>
        
    </body>
</html>